* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.w-center {
  position: absolute;
  left: calc(50% - var(--w) / 2);
}

.h-center {
  position: absolute;
  top: calc(50% - var(--h) / 2);
}

.page {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.page > .btn {
  --w: 36.9vw;
  bottom: 9.3vw;
  width: var(--w);
}

.music audio {
  display: none;
}

.music .icon {
  display: none;
  z-index: 99;
  position: fixed;
  right: 5.3vw;
  top: 5.3vw;
  width: 9.3vw;
}

.sun {
  width: 20vw;
  animation: scale2 0.5s linear infinite alternate;
}

.load {
  z-index: 10;
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
}

.load .progress {
  --w: 90vw;
  --h: 4vw;
  width: var(--w);
  height: var(--h);
  border-radius: var(--h);
  background-color: #609887;
}

.load .bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  border-radius: var(--h);
  background-color: #f1990f;
}

.load .text {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: var(--h);
  font-size: 0.53vw;
  color: #fff;
}

.p1 {
  display: block;
  background-image: url('../img/p1/bg.png');
}

.p1 .ball {
  --l: 12vw;
  position: absolute;
  left: var(--l);
  top: 13.3vw;
  width: 13.3vw;
}

.p2 {
  background-image: url('../img/p2/bg.png');
}

.title {
  position: absolute;
  top: 10vh;
  width: 100%;
  height: 8vw;
  line-height: 8vw;
  text-align: center;
  color: #fff;
}

.title span {
  display: inline-block;
  margin: 0 1vw;
}

.back {
  position: absolute;
  left: 5.3vw;
  top: 5.3vw;
  width: 5.86vw;
}

.p3 {
  background-image: url('../img/p3/bg.png');
}

.p3 .list {
  --w: 84.66vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  row-gap: 6vw;
  top: 31vh;
  width: var(--w);
}

.p3 .item {
  width: 32.26vw;
  height: 8vw;
  display: flex;
  align-items: center;
  font-size: 3.2vw;
  background: url('../img/p3/op.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

.p3 .item.active {
  background-image: url('../img/p3/op-active.png');
  background-size: 100% 110%;
  color: red;
}

.p3 .item span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.06vw;
  height: 5.06vw;
  border-radius: 50%;
  background-color: #fff;
  color: #2b7a50;
  margin: 0 2vw;
}

.p3 .item.active span:nth-child(1) {
  color: red;
}

.p4 {
  background-image: url('../img/p4/bg.png');
}

.p4 .list {
  --w: 84.8vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 3.33vw;
  justify-items: center;
  top: 59vh;
  width: var(--w);
  padding: 0 7.6vw;
}

.p4 .item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30.26vw;
  height: 8vw;
  font-size: 3.2vw;
  border-radius: 2vw;
  color: #ff0b0b;
  background-color: #eeeeee;
}

.p4 .score {
  --w: 32vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 35vh;
  width: var(--w);
  height: 16.66vw;
}

.p4 .stars {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.p4 .score img {
  width: 4.53vw;
  transition: all 0.5s;
  transform: translate(-100vw, -100vw);
}

.p4 .score img.active {
  transform: translate(0);
}

.p4 .score span {
  text-align: center;
  font-size: 6.4vw;
  color: #fff;
}

.p5 {
  background-image: url('../img/p5/bg.png');
}

.p5 .zhengshu {
  position: absolute;
  top: 36vw;
  width: 100%;
}

.p5 .zhengshu.active {
  animation: scale 0.5s linear 6 alternate;
}

.p5 .top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
